import React, {memo} from 'react'
import {history, connect, useHistory} from 'umi'
import {Breadcrumb} from 'antd'
import styles from './index.less'
import config from '@/config/routes-config'

const BreadcrumbDom = memo(() => {
	const router = useHistory()

	const itemConfig = config?.filter(
		(item: any) => router?.location?.pathname === item?.path,
	)[0]
	const itemConfigLast: any = config?.filter(
		(item: any) =>
			itemConfig?.menuname?.toString() === item?.menuname?.toString() &&
			!item?.tabTitle,
	)[0]
	return (
		<div className={styles.breadcrumb}>
			<Breadcrumb>
				{itemConfig?.menuname.map((item: any, index: number) => {
					if (
						itemConfig.type &&
						index === itemConfig.menuname.length - 1
					) {
						return (
							<Breadcrumb.Item
								onClick={() => {
									history.push(itemConfigLast?.path)
								}}>
								<span className="cursor_pointer">{item}</span>
							</Breadcrumb.Item>
						)
					}
					return <Breadcrumb.Item>{item}</Breadcrumb.Item>
				})}
				{itemConfig.type ? (
					<Breadcrumb.Item>{itemConfig.tabTitle}</Breadcrumb.Item>
				) : null}
			</Breadcrumb>
		</div>
	)
})

export default connect(({global}: any, user: any) => ({global, user}))(
	BreadcrumbDom,
)
